<template>
  <div class="good_card">
    <img :src="item.cover" class="good_img" @click="navTo('/detail',item)" :onerror="defaultImg"/>
    <div class="good_title">{{item.name}}</div>
    <div class="price"> <span class="price_tag">￥</span>{{item.price || 0}}</div>
    <div class="desc">{{item.desc}}</div>
  </div>
</template>

<script>
import {mixins} from "@/utils/mixins"
export default {
  mixins:[mixins],
  props:{
    item:Object
  },
  computed:{
    defaultImg() {
      return `this.src="${require("@/assets/image.png")}"`;
    },
  }
};
</script>

<style lang="less" scoped >
.good_card {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.1);
  position: relative;
  margin-bottom: 10px;
}
.good_img {
  width: 100%;
  // min-height: 3rem;
  background-color: #ccc;
}
.good_title{
    padding:.1rem;
    font-size: .30rem;
}
.price{
  color: #3963bc;
  font-size: .28rem;
}

.tag {
  display: flex;
  margin: 0.1rem 0;
  padding: 0 0.1rem;
  .van-tag {
    margin-right: 0.1rem;
  }
}

.desc {
  font-size: 0.24rem;
  text-align: justify;
  padding: 0 0.16rem .16rem;
  color: #999;
}
</style>